<template>
	<view>
    <cm-nav back="返回">
      <template v-slot:center>
        <view class="cm-flex cm-flex-a-center cm-flex-j-center cm-h-100"
          @click="pickTimeHandler" v-if="isLoaded">
          <view class="cm-text-h-10">
            <view class="cm-text-14">{{ solarDate + ' ' + solarTime }}</view>
            <view class="cm-text-12 cm-margin-top-5">{{ lunarText }}</view>
          </view>
          <cm-icon size="16" type="cuIcon-triangledownfill"></cm-icon>          
        </view>
      </template>
      <template v-slot:left>
        <!-- #ifdef MP -->
        <!-- 小程序因为右边的胶囊，只能放在左边 -->
        <cm-button @click="todayHandler" type="primary" :border="false"
          :cm-style="{ padding: '0', backgroundColor: 'rgba(0, 0, 0, 0)' }">
          <cm-icon size="32" type="iconfont icon-milestone-today_other"></cm-icon>
        </cm-button>
        <!-- #endif -->          
      </template>
      <template v-slot:right>
        <!-- #ifndef MP -->
        <!-- 非小程序，今天放在右边 -->
        <cm-button @click="todayHandler" type="primary" :border="false"
          :cm-style="{ padding: '0', backgroundColor: 'rgba(0, 0, 0, 0)' }">
          <cm-icon size="32" type="iconfont icon-milestone-today_other"></cm-icon>
        </cm-button>
        <!-- #endif -->
      </template>
    </cm-nav>
   
    <!-- 先不渲染主界面，显示加载中提示，使得界面更加友好 -->
    <view v-if="isLoaded">
      
      <!-- 周历 -->
      <view class="week-calendar-wrapper" :style="[weekCalendarStyle]" v-show="isWeekCalendarShow">
        <cm-calendar ref="weekCalendar" type="week"
          :date-init="initOptions"
          :ani-duration="calendarAniDuration"
          @date-change="dateChangeHandler">
        </cm-calendar>      
      </view>

      <!-- 月历 -->
      <view :id="'content-' + navData[0].id">
        <cm-calendar ref="monthCalendar" type="month"
          :date-init="initOptions"
          :ani-duration="calendarAniDuration"
          @date-change="dateChangeHandler">
        </cm-calendar>      
      </view>
      
      <!-- 导航条 -->
      <cm-sticky :top="scrollTop"
        @sticky="stickyHandler">
        <cm-scroll-bar cm-class="app-border-color_ex-bottom" ref="scrollBar" :list="navData"
          @click="navSelectHandler"></cm-scroll-bar>      
      </cm-sticky>

      <view class="scroll-content">
        <view :id="'content-' + navData[1].id">
          <cm-card :title="navData[1].text" title-icon="cuIcon-title app-theme-color"
            :is-full="false" footer-enabled extra="时间输入"
            @extra-click="dateInputHandler">
            <view class="cm-flex cm-text-center cm-flex-a-center card-content">
              <view class="cm-flex-g-1 cm-flex-s-0 cm-padding-right-10">
                <view>{{ date.getYearName() + date.getMonthName() }}</view>
                <view class="basic-day-show cm-margin-top-10">{{ date.day }}</view>
                <view class="cm-margin-top-10 cm-flex cm-flex-j-center cm-flex-a-center">
                  <text class="cm-bold app-theme-color">{{ date.getTime() }}</text>
                  <view style="width: 6px;"></view>
                  <text>{{ date.getWeekDay() }}</text>
                </view>
                <view class="cm-margin-top-10">{{ date.getTermRange() }}</view>
              </view>
              <view class="cm-flex-g-1">
                <view>农历{{ date.getLunarYearName() }}</view>
                <view class="basic-lunar-show cm-margin-top-10 app-theme-color cm-bold">{{ date.getLunarMonthName() + date.lunarDay }}</view>
                <view class="cm-flex cm-flex-wrap cm-flex-j-center cm-margin-top-10">
                  <view class="cm-margin-2"><text class="cm-bold app-theme-color">{{ date.ganzhi[0].name }}</text>年</view>
                  <view class="cm-margin-2"><text class="cm-bold app-theme-color">{{ date.ganzhi[1].name }}</text>月</view>
                  <view class="cm-margin-2"><text class="cm-bold app-theme-color">{{ date.ganzhi[2].name }}</text>日</view>
                  <view class="cm-margin-2"><text class="cm-bold app-theme-color">{{ date.ganzhi[3].name }}</text>时</view>
                </view>
                <view class="basic-events cm-margin-top-10">
                  <view class="basic-no-event cm-text-12" v-if="!date.thisTerm && date.festivals.length === 0">本日无事件</view>
                  <view class="cm-flex cm-flex-wrap cm-flex-j-center cm-flex-a-center cm-flex-ac-center cm-h-100" v-else>
                    <cm-tag v-if="date.thisTerm" class="cm-margin-3" color="sky">{{ date.getThisTermTime() }} {{ date.thisTerm.name }}</cm-tag>
                    <cm-tag class="cm-margin-3" color="red" v-for="(item, index) in date.festivals" :key="index">{{ item }}</cm-tag>
                  </view>                
                </view>

              </view>
            </view>
            
            <template v-slot:footer>
              <view class="cm-flex">
                <cm-button class="cm-flex-g-1" type="primary" outlined :border="false" radius="none"
                  @click="pickTimeHandler">
                  <cm-icon size="16" type="iconfont icon-calendar"></cm-icon>
                  <text class="cm-margin-left-3">选择时间</text>          
                </cm-button>
                <view class="basic-footer-split"></view>
                <cm-button class="cm-flex-g-1" type="primary" outlined :border="false" radius="none"
                  @click="todayHandler">
                  <cm-icon size="16" type="iconfont icon-responsetime"></cm-icon>
                  <text class="cm-margin-left-3">当前时间</text>
                </cm-button>
              </view>
            </template>
          </cm-card>
        </view>
        
        <view :id="'content-' + navData[2].id">
          <cm-card :title="navData[2].text" title-icon="cuIcon-title app-theme-color" :is-full="false" footer-enabled
            extra="四柱留意" @extra-click="relativeHandler">
            <view class="card-content cm-text-center">
              <cm-row>
                <cm-col v-for="(count, index) in 4" :key="index">
                  <view>{{ date.ganzhi[3 - index].description }}</view>
                  <bagua-element cm-class="cm-margin-top-10" size="24" ele-class="cm-bold" :bagua="date.ganzhi[3 - index].gan"></bagua-element>
                  <bagua-element cm-class="cm-margin-top-10" size="24" ele-class="cm-bold" :bagua="date.ganzhi[3 - index].zhi"></bagua-element>
                  <cm-radio class="cm-margin-top-10" type="primary" :checked="ganzhiSelectedIndex === 3 - index" @click="ganzhiSelectionChangeHandler(3 - index)"></cm-radio>
                </cm-col>
              </cm-row>
              <view class="cm-flex cm-flex-a-center cm-flex-j-center cm-margin-top-15">
                <view class="cm-margin-right-20">调整干支：{{ date.ganzhi[ganzhiSelectedIndex].description }}</view>
                <!-- 其他柱一次调整一年/一月/一日 -->
                <cm-button v-if="ganzhiSelectedIndex !== 3" class="cm-margin-right-20" type="primary" outlined radius="circle" :cm-style="{ width: '40px', height: '40px', padding: '0' }"
                  @click="dateOffsetHandler(1)">+</cm-button>
                <cm-button v-if="ganzhiSelectedIndex !== 3" type="primary" outlined radius="circle" :cm-style="{ width: '40px', height: '40px', padding: '0' }"
                  @click="dateOffsetHandler(-1)">-</cm-button>
                <!-- 时柱一次调整两个小时 -->
                <cm-button v-if="ganzhiSelectedIndex === 3" class="cm-margin-right-20" type="primary" outlined radius="circle" :cm-style="{ width: '40px', height: '40px', padding: '0' }"
                  @click="dateOffsetHandler(2)">+</cm-button>
                <cm-button v-if="ganzhiSelectedIndex === 3" type="primary" outlined radius="circle" :cm-style="{ width: '40px', height: '40px', padding: '0' }"
                  @click="dateOffsetHandler(-2)">-</cm-button>
              </view>
              
              <view class="ganzhi-scroll-wrapper cm-margin-top-15">
                <cm-row cm-class="cm-flex-a-center">
                  <scroll-view class="ganzhi-scroller" scroll-x scroll-with-animation :scroll-left="timeScrollLeft">
                    <view class="ganzhi-scroller-item cm-padding-5" v-for="(hour, index) in allHours" :key="index"
                      :class="[ date.ganzhi[3].zhi.index === 11 - index ? 'active' : '' ]"
                      @click="hourClickHandler(11 - index)">
                      <view><bagua-element size="16" :bagua="allHours[11 - index].gan"></bagua-element></view>
                      <view><bagua-element cm-class="cm-margin-top-10" size="16" :bagua="allHours[11 - index].zhi"></bagua-element></view>
                      <view class="cm-text-14 cm-margin-top-10">{{ allHours[11 - index].zhi.hourStart }} ~ {{ allHours[11 - index].zhi.hourEnd }}</view>
                    </view>
                  </scroll-view>                
                  <view class="ganzhi-scroller-title">今日时辰</view>
                </cm-row>              
              </view>
            </view>
            
            <template v-slot:footer>
              <view class="cm-flex">
                <cm-button class="cm-flex-g-1" type="primary" outlined :border="false" radius="none"
                  @click="relativeHandler">
                  <cm-icon size="16" type="iconfont icon-search"></cm-icon>
                  <text class="cm-margin-left-3">查看四柱留意</text>          
                </cm-button>
              </view>
            </template>
          </cm-card>
        </view>
        
        <view :id="'content-' + navData[3].id">
          <cm-card :title="navData[3].text" title-icon="cuIcon-title app-theme-color" :is-full="false">
            <view class="cm-flex cm-flex-a-center cm-padding-10 cm-text-14 app-border-color_ex-bottom">
              <view class="cm-flex-g-1">
                <view class="cm-flex cm-flex-a-center">
                  <term-tag :term="date.prevTerm"></term-tag>
                  <view class="cm-padding-10">{{ timeStr(date.prevTerm.time) }}</view>
                </view>
                <view class="cm-flex cm-flex-a-center">
                  <term-tag :term="date.nextTerm"></term-tag>
                  <view class="cm-padding-10">{{ timeStr(date.nextTerm.time) }}</view>
                </view>
              </view>
              <cm-button class="cm-flex-s-0" type="primary" outlined @click="termsHandler">全年节气</cm-button>
            </view>
            <view class="cm-padding-10 cm-text-14">
              <view class="cm-flex cm-flex-a-center">
                <cm-icon class="cm-margin-right-10 app-color-yellow" size="32" :type="moonIcon(date.prevMoon.index, 0)"></cm-icon>
                <view style="width: 55px;">
                  <term-tag type="moon" :term="date.prevMoon"></term-tag>
                </view>
                <view class="cm-padding-10">{{ timeStr(date.prevMoon.time) }}</view>
              </view>
              <view class="cm-flex cm-flex-a-center">
                <cm-icon class="cm-margin-right-10 app-color-yellow" size="32" :type="moonIcon(date.nextMoon.index, 0)"></cm-icon>
                <view style="width: 55px;">
                  <term-tag type="moon" :term="date.nextMoon"></term-tag>
                </view>
                <view class="cm-padding-10">{{ timeStr(date.nextMoon.time) }}</view>
              </view>
            </view>
            <view class="moon-scroll-wrapper cm-text-center">
              <scroll-view class="moon-scroller" scroll-x scroll-with-animation :scroll-left="moonScrollLeft">
                <view class="moon-scroller-item cm-padding-5" v-for="(item, index) in date.moonDays" :key="index"
                  :class="[  date.month === item.month && date.day === item.day ? 'active' : ''  ]"
                  @click="moonClickHandler(item)">
                  <cm-icon class="app-color-yellow" size="32" :type="moonIcon(item.index, item.offset)"></cm-icon>
                  <view class="moon-scroller-item-tag cm-margin-top-10">
                    <term-tag v-if="item.name" type="moon" :term="item"></term-tag>
                  </view>
                  <view class="cm-margin-top-5">{{ item.month }}.{{ item.day }}</view>
                </view>
              </scroll-view>
            </view>            
          </cm-card>
        </view>
        
        <view :id="'content-' + navData[4].id">
          <cm-card :title="navData[4].text" title-icon="cuIcon-title app-theme-color" :is-full="false" footer-enabled>
            <template v-slot:extra>
              <location-tip></location-tip>
            </template>
            <view class="cm-padding-10">
              <view class="sun-baseline cm-relative app-text-color_bd-bottom cm-text-center cm-padding-top-20">
                <view class="sun-way" :style="[sunStyle]">
                  <view class="cm-absolute" :style="[sunPos]">
                    <cm-icon cm-class="cm-bold" :size="sunSize" type="iconfont icon-wi-day-sunny app-color-red"></cm-icon>
                  </view>
                </view>
              </view>
              <view class="cm-flex cm-flex-j-between cm-text-center cm-margin-top-10" :style="[sunDetailStyle]">
                <view>
                  <cm-icon type="iconfont icon-wi-horizon-alt"></cm-icon>
                  <view class="cm-margin-top-5 cm-text-14">日出 {{ sunState.rise }}</view>
                </view>
                <view>
                  <cm-icon cm-class="sun-reverse" type="iconfont icon-wi-horizon-alt"></cm-icon>
                  <view class="cm-margin-top-5 cm-text-14">日落 {{ sunState.down }}</view>
                </view>
              </view>
            </view>
            <template v-slot:footer>
              <view class="cm-flex">
                <cm-button class="cm-flex-g-1" type="primary" outlined :border="false" radius="none"
                  @click="weatherHandler">
                  <cm-icon size="16" type="iconfont icon-search"></cm-icon>
                  <text class="cm-margin-left-3">查看天气预报</text>          
                </cm-button>
              </view>
            </template>
          </cm-card>
        </view>
      </view>
      
      <cm-picker-date-popup ref="timePicker" type="both" 
        :col-names="['年', '月', '日', '时', '分']" 
        :lunar-start="startYear"
        :lunar-end="endYear"
        :lunar-values="lunarInit"
        :solar-start="startYear + startSolarTail"
        :solar-end="endYear + endSolarTail"
        :solar-values="solarInit"
        @confirm="confirmHandler"
        @switch="switchHandler"></cm-picker-date-popup>
      
      <!-- 日期输入模态框 -->
      <cm-modal ref="timeInput" title="输入日期" height="160px"
        type="slot"
        @confirm="inputConfirmHandler">
        <view class="cm-flex cm-flex-a-center cm-padding-10">
          <cm-input v-model="inputYear" border></cm-input>
          <view class="cm-margin-5">年</view>
          <cm-input v-model="inputMonth" border></cm-input>
          <view class="cm-margin-5">月</view>
          <cm-input v-model="inputDay" border></cm-input>
          <view class="cm-margin-5">日</view>        
        </view>
      </cm-modal>
      
      <!-- 四柱留意模态框 -->
      <cm-modal ref="relativeModal" type="slot" height="70%"
        bottom-disabled mask-closed>
        <template v-slot:header>
          <view class="relative-modal-title cm-padding-10 app-border-color_ex-bottom">
            <view class="cm-flex cm-flex-a-center">
              <cm-icon type="cuIcon-titles app-theme-color"></cm-icon>
              <text>四柱留意</text>
            </view>
            <cm-icon type="iconfont icon-close" @click="closeRelativeHandler"></cm-icon>
          </view>          
        </template>
        <view class="cm-content">
          <!-- 四柱信息 -->
          <view class="relative-modal-ganzhi cm-text-center cm-padding-10 app-border-color_ex-bottom">
            <cm-row>
              <cm-col v-for="(count, index) in 4" :key="index">
                <view>{{ date.ganzhi[3 - index].description }}</view>
                <bagua-element cm-class="cm-margin-top-10" size="24" ele-class="cm-bold" :bagua="date.ganzhi[3 - index].gan"></bagua-element>
                <bagua-element cm-class="cm-margin-top-10" size="24" ele-class="cm-bold" :bagua="date.ganzhi[3 - index].zhi"></bagua-element>
              </cm-col>
            </cm-row>
          </view>
          <!-- 留意信息 -->
          <view class="relative-modal-main">
            <scroll-view class="cm-h-100" scroll-y :scroll-top="modalScrollTop">
              <cm-divider><text class="cm-text-18 cm-bold">天干留意</text></cm-divider>
              <view class="cm-padding-10" v-if="relations.gan">
                <bagua-relation v-for="(item, index) in relations.gan.relations" v-bind:key="index" v-bind:relation="item"></bagua-relation>
              </view>
              <cm-divider><text class="cm-text-18 cm-bold">地支留意</text></cm-divider>
              <view class="cm-padding-10" v-if="relations.zhi">
                <bagua-relation v-for="(item, index) in relations.zhi.relations" v-bind:key="index" v-bind:relation="item"></bagua-relation>
              </view>
            </scroll-view>          
          </view>
        </view>
      </cm-modal>
      
      <!-- 全年节气模态框 -->
      <cm-modal ref="termsModal" type="slot" height="70%"
        bottom-disabled mask-closed>
        <template v-slot:header>
          <view class="terms-modal-title cm-padding-10 app-border-color_ex-bottom">
            <view class="cm-flex cm-flex-a-center">
              <cm-icon type="cuIcon-titles app-theme-color"></cm-icon>
              <text>全年节气</text>
            </view>
            <cm-icon type="iconfont icon-close" @click="closeTermsHandler"></cm-icon>
          </view>          
        </template>
        <view class="cm-content">
          <view class="terms-modal-main">
            <scroll-view class="cm-h-100" scroll-y :scroll-top="modalScrollTop">
              <view class="cm-flex cm-flex-a-center cm-padding-10 cm-text-14 app-border-color_ex-bottom"
                v-for="(item, index) in yearTerms" :key="index">
                <term-tag :term="item"></term-tag>
                <view class="cm-flex-g-1 cm-padding-left-10 cm-padding-right-10">{{ timeStr(item.time) }}</view>
                <cm-icon type="iconfont icon-double-arro-right app-theme-color"></cm-icon>
              </view>
            </scroll-view> 
          </view>
        </view>
      </cm-modal>
      
    </view>
    
    <cm-loading @loading="init"></cm-loading>
	</view>
</template>

<script src="./calendar.js"></script>

<style lang="stylus">
@import './calendar.styl'
</style>
